<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/pub/includ.jsp"%>
<%
	String type=request.getParameter("type");
	if(type==null)type="";
%>
<html>
<head>
<title>选取图片</title>
<style type="text/css">
<!--
.file-list{margin:10px 0 0 0; height:310px; width:570px; overflow:auto;border:1px solid #e8e8e8;}
.file-list ul{margin:10px auto auto 10px}
.file-list li{width:124px;height:114px;position:relative;float:left;margin-left:10px;margin-bottom:30px;}
.file-list li a{border:1px solid #F0F0E8;background-color:#FFF;padding:6px;display:block;}
.file-list li a:hover{border:1px solid #333;background-color:#333;text-decoration: none;}
.file-list li a:active{border:1px solid #333;background-color:#333;text-decoration: none;}
.file-list li a span{overflow:hidden; text-align:center; font-size:12px;width:124px;position:absolute;top:114px;left:0px;line-height:15px;}
.file-list li a:hover span{color:#FFF;overflow:visible;background-color:#333;width:124px;position:absolute;top:114px;left:0px;line-height:15px;word-warp:break-word;word-break:break-all;}
.file-list li a:active span{color:#FFF;overflow:visible;background-color:#333;width:124px;position:absolute;top:114px;left:0px;line-height:15px;word-warp:break-word;word-break:break-all;}
.file-list li a img{width:110px;height:100px;}
-->
</style>
<script>
var current_pic="";
var moveup_dir_path="";
var current_dir_path="";
$(function() {
	$.ajax({
	   type: "POST",
	   url: "<%=path %>/res/show",
	   data: "type=<%=type %>",
	   dataType: 'json',
	   error: function(){
	   		alert("读取图片失败～请重试");
	   },
	   success: function(data){
		   $("#listDiv").empty(); 
           $("#listDiv").append(" <ul> </ul>"); 
           var current_url = data.current_url;
           for (var i = 0; i <data.file_list.length; i++) { 
           	   if(data.file_list[i].filename == "Thumbs.db")continue;
               if(!data.file_list[i].is_photo){
           	   	$("#listDiv ul").append("<li><a href='javascript:void(0)' ondblclick=\"movepath('"+current_dir_path+data.file_list[i].filename+"/')\" ><span>"+data.file_list[i].filename+"</span><img src='<%=request.getContextPath() %>/resources/skins/default/images/directory.gif' width='121'  border='0' /></a></li>");
           	   }else{
                $("#listDiv ul").append("<li><a href='javascript:selImg(\""+current_url+data.file_list[i].filename+"\")' ><span>"+data.file_list[i].filename+"</span><img src='"+ data.current_url+data.file_list[i].filename +"' width='121'  border='0' /></a></li>");
               }
            } 
           current_dir_path=data.current_dir_path;
           moveup_dir_path=data.moveup_dir_path;
	   }
	});	
});

function changeOrder(){
	$.ajax({
	   type: "POST",
	   url: "<%=path %>/res/show",
	   data: "type=<%=type %>&order="+$("#viewType").val()+"&path="+current_dir_path,
	   dataType: 'json',
	   error: function(){
	   		alert("读取图片失败～请重试");
	   },
	   success: function(data){
		   $("#listDiv").empty(); 
           $("#listDiv").append(" <ul> </ul>"); 
           var current_url = data.current_url;
           for (var i = 0; i <data.file_list.length; i++) { 
           	   if(data.file_list[i].filename == "Thumbs.db")continue;
           	   if(!data.file_list[i].is_photo){
           	   	$("#listDiv ul").append("<li><a href='javascript:void(0)' ondblclick=\"movepath('"+current_dir_path+data.file_list[i].filename+"/')\" ><span>"+data.file_list[i].filename+"</span><img src='<%=request.getContextPath() %>/resources/skins/default/images/directory.gif' width='121'  border='0' /></a></li>");
           	   }else{
                $("#listDiv ul").append("<li><a href='javascript:selImg(\""+current_url+data.file_list[i].filename+"\")' ><span>"+data.file_list[i].filename+"</span><img src='"+ data.current_url+data.file_list[i].filename +"' width='121'  border='0' /></a></li>");
               }
           } 
           current_dir_path=data.current_dir_path;
           moveup_dir_path=data.moveup_dir_path;
	   }
	});	
}

function selImg(imgpath){
	current_pic = imgpath;
}
function save(){
	if(current_pic==""){
		alert("请选择图片！");
	}else{
		return current_pic;
	}
}
function uploadFrm(){
	if($("#imgFile").val()==""){
		alert("请选择要上传的图片！");
	}else{
		$('#c').val(current_dir_path);
	 	var options = {
			type: 'POST',
			async: false,
			dataType: 'content-type',
			success: function(msg) {
				alert("上传成功！");
				 changeOrder();
			}
		}
		$('#uploadForm').ajaxSubmit(options);
	}
}
function movepri(){
	current_dir_path=moveup_dir_path ;
	changeOrder();
}
function movepath(path){
	current_dir_path=path;
	changeOrder();
}
function newpath(){
	opendailog("{src:'<%=path %>/res/get/newPath?c="+current_dir_path+"',title:'创建文件夹',width:200,height:100,savefunc:'savefunc1'}",window);
}
function savefunc1(frame){
	var retv = frame.contentWindow.save();
	if(retv=="success"){
		changeOrder();
		return retv;		
	}
}
</script>
</head>
<body style="margin:0;">
<div class="box">
	<form id="uploadForm" name="uploadForm" method="post" action="<%=path %>/res/upload" enctype="multipart/form-data" >
	<input type="file" id="imgFile" name="imgFile" style="width:300px;height:20px;" />
	<input type="button" style="height:20px" value="上传图片" onclick="uploadFrm();">
	<input type="hidden" value="" name="c" id="c" />
	<input type="hidden" value="<%=type %>" name="type" />
	</form>
</div>
<div style="clear:both"></div>
<div >
<div style="float:left;margin-top:10px">
	<a href="javascript:movepri()">移到上一级文件夹</a>
	<a href="javascript:newpath();">新建文件夹</a>
</div>
<div style="float:right;"><span>排序方式</span>
  	<select id="viewType" name="viewType" onchange="changeOrder();">
			<option selected value="NAME">名称</option>
			<option value="SIZE">大小</option>
			<option value="TYPE">类型</option>
	</select>
</div>
</div>
<div id="listDiv" class="file-list">
</div>
</body>
</html>


